var rules = [ {
    'css': {
      'border': '0 none'
    },
    'name': '无边框'
  }, {
    'css': {
      'border': '2px dashed #333',
      'padding': '5px'
    },
    'name': '虚线边框'
  }, {
    'css': {
      'border': '2px dotted #333',
      'padding': '5px'
    },
    'name': '点边框'
  }, {
    'css': {
      'box-shadow': 'rgba(0, 0, 0, .5) 3.53553px 3.53553px 8px',
      'margin': '0 8px 8px 0'
    },
    'name': '右下阴影'
  }, {
    'css': {
      'box-shadow': 'rgba(0, 0, 0, .5) -0.2em -0.2em 0.8em',
      'margin': '0.5em 0px 0px 0.5em'
    },
    'name': '左上阴影'
  }, {
    'css': {
      'border': '1px solid rgb(220,220,221)',
      'border-radius': '2px',
      'padding': '10px',
      'box-shadow': 'rgb(200,200,200) 0px 0px 6px'
    },
    'name': '四周边框四周阴影'
  }, {
    'css': {
      'border': '1px solid rgb(208, 208, 209)',
      'box-shadow': 'rgba(7, 1, 3, 0.4) 2px 2px 5px',
      'padding': '10px'
    },
    'name': '四周边框右下阴影'
  }, {
    'css': {
      '-webkit-box-reflect': 'below 0px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.7, transparent), to(rgba(250, 250, 250, 0.298039)))',
      'margin-bottom': '60px;'
    },
    'name': '倒影'
  }

  , {
    'css': {
      '-webkit-mask': '-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)))'
    },
    'name': '底部虚化'
  }, {
    'css': {
      '-webkit-mask': '-webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)))'
    },
    'name': '顶部虚化'
  }, {
    'css': {
      '-webkit-mask': '-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)))'
    },
    'name': '右部虚化'
  }, {
    'css': {
      '-webkit-mask': '-webkit-gradient(linear, 100% 0%, 0% 0%, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)))'
    },
    'name': '左部虚化'
  }, {
    'css': {
      'box-shadow': '0px 0px 12px rgba(0, 0, 0, .8) inset',
      //'border': '1px solid rgb(239, 112, 96)',
      'padding': '4px'
    },
    'name': '内阴影'
  }, {
    'css': {
      'box-shadow': '0px 0px 12px rgba(0, 0, 0, .8)',
      //'border': '1px solid rgb(0, 0, 0)',
      'padding': '1px'
    },
    'name': '外阴影'
  }, {
    'css': {
      'border': '5px solid rgba(0, 0, 0, .2)'
    },
    'name': '实线边框'
  }, {
    'css': {
      'box-shadow': '0px 0px 20px 6px rgba(0, 0, 0, 0.4)'
    },
    'name': '宽阴影'
  }

  //,{'css':{'border-width':'10px','border-color':'rgb(198, 198, 198) rgb(235, 234, 225) rgb(235, 234, 225) rgb(198, 198, 198)','border-style':'solid','width':'210px','box-sizing':'content-box'},'oprate':'circle','name':'圆形双色边框'} // 圆形图片边距无法生效 'padding':'2px',
  //,{'css':{'border':'10px solid rgba(159, 136, 127,0.9)','padding':'0','height':'210px','width':'210px','box-sizing':'content-box'},'oprate':'circle','name':'圆形图片边框'}
];

( function() {

  var $img;
  var img = editor.selection.getRange().getClosedNode();
  if ( img && img.tagName && img.tagName.toLowerCase() == 'img' ) {
    $img = $( img ).clone();
    dialog.anchorEl = img;
  } else {
    $img = $( '<img src="http://image3.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpei96aWFkRERReGJDSkhpYWx2VzhDaWNodmlhY2RoWGliT2JiWmdWYmczOHl3cnBJN0FmcnFWaGVoZjdKczBPRVFDMzFCOHNPQ2pkdWJHTlVCaWF6c3NyQk9mNjZYdy8wP3d4X2ZtdD1qcGVn">' );
  }

  var src = $img.prop( 'src' );

  for ( var i in rules ) {
    var $newImg = $img.clone().removeAttr( 'style' );
    $newImg.prop( 'src', $newImg.prop( 'src' ) );
    if ( rules[ i ].oprate == 'circle' ) {
      $newImg = $( '<section data-role="circle" style="border-radius: 100%;overflow: hidden;margin: 0 auto;width:100%;padding-bottom:100%;height:0px;background-image:url(' + src + ');background-position:50% 50%;background-size: cover;"><img src="' + src + '" style="opacity:0;width:100%;"></section>' );
    }

    for ( var cn in rules[ i ][ 'css' ] ) {
      $newImg.css( cn, rules[ i ][ 'css' ][ cn ] );
    }

    var img_html = $newImg.prop( 'outerHTML' );

    var html = '<div class="item" data-rule="' + i + '" style="">' + '<p>' + rules[ i ][ 'name' ] + '</p>' + img_html + '</div>';

    $( '#img-dialog-content' ).append( html );
  }

  $( '.item' ).click( function() {
    $( '.active' ).removeClass( 'active' );
    $( this ).addClass( 'active' );
  } );

  $( '#img-radius' ).keyup( function() {
    if ( $( this ).val() ) {
      $( '#img-dialog-content img' ).css( 'border-radius', $( this ).val() );
    }
  } );

  var init_width = 0;
  if ( $img.css( 'border-radius' ) ) {
    init_width = parseInt( $img.css( 'border-radius' ) );
  }

  jQuery( '._imgradius' ).attr( 'data-param-init-value', init_width )
    .on( 'inited', function( e, val ) {
      jQuery( this ).find( '#radius-width' ).html( val + 'px' );
      $( '#img-radius' ).val( val + 'px' ).trigger( 'keyup' );
    } )
    .slider( {
      'initAll': false,
      'initValue': init_width
    } )
    .on( "change", function( e, val ) {
      // e is event
      // val is current value
      var width = val; //parseInt(100*val/100);
      jQuery( this ).find( '#radius-width' ).html( width + 'px' );
      //p.find('> .layout').eq(0).css('width',width+'px');
      $( '#img-radius' ).val( width + 'px' ).trigger( 'keyup' );
    } );

} )();

function applyParagraph( type ) {
  var object;
  if ( type == 'all' ) {
    /*if ( !editor.isPaidUser() ) {
    	alert( '付费的VIP会员才能进行应用到全文操作' );
    	return;
    }*/
    var editor_document = editor.selection.document;
    object = $( editor_document ).find( 'img' );
  } else {
    object = dialog.anchorEl;
  }
  if ( $( '.active' ).size() == 0 ) {
    alert( "请先选择需要的样式" );
  }
  var idx = $( '.active' ).attr( 'data-rule' );
  $( object ).each( function() {
    if ( $( this ).hasClass( 'assistant' ) ) {
      return;
    }
    //$( this ).removeAttr( 'style' );

    $( this ).css( rules[ idx ][ 'css' ] );
    if ( '#img-radius' ) {
      $( this ).css( 'border-radius', $( '#img-radius' ).val() );
    }

  } );
  dialog.close( false );
}